<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <pre>
          作用域插槽:父组件获取到子组件的数据进行修改
                在爷爷模板中设置数据(data)=>声明爸爸组件(插槽)=>爸爸组件绑定数据在标签中 v-bind:data='父模板数据属性名' =>孙子模版再用props拿到数据=>template模板便利中间放入插槽=>放入template标签中
      </pre
    >
    <div class="box">
      <list :datas="datas">
        <!-- 使用slot-scope接收数据 -->
        <template slot-scope="value">
          <!-- <slot v-if="value.val">{{value.id}}</slot> -->
          {{value.val}}
        </template>
      </list>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      // 子组件
      //  v-bind:自定义名=v-for的item
      //   <slot :val='item'></slot>发送数据给template
      Vue.component('list', {
        props: ['datas'],
        template: `
       <div>
          <div v-for='item in datas' v-bind:key='item.id'>
             <slot :val='item'></slot>
           </div>
      </div>
        `,
      })
      //父组件
      new Vue({
        el: '.box',
        data: {
          datas: [
            { id: 1, name: 'mmd', age: '18' },
            { id: 2, name: 'mmd', age: '18' },
            { id: 3, name: 'mmd', age: '18' },
            { id: 4, name: 'mmd', age: '18' },
            { id: 5, name: 'mmd', age: '18' },
          ],
        },
        methods: {},
      })
    </script>
  </body>
</html>
